<template>
    <view @touchmove.stop.prevent="() => false">
        <u-popup :show="show" mode="center" bgColor="transparent" @close="closeEvent">
            <view class="pop_view">
                <label style="margin-top: 60rpx; color: #ffffff; font-size: 36rpx; font-weight: 500">{{
                    list[0].upgrade == 1 ? '您的勋章升级了' : '恭喜您获得勋章'
                }}</label>
                <view v-if="list.length == 1" style="display: flex; flex-direction: column; align-items: center">
                    <image
                        mode="heightFix"
                        :src="list[0].picAbsolute"
                        style="margin-top: 50rpx; height: 220rpx; width: 200rpx; background-color: #eaeaea"
                    ></image>
                    <label
                        style="margin-top: 20rpx; color: #234941; font-size: 28rpx; font-weight: 400; padding: 0 20rpx"
                        >{{ list[0].name }}</label
                    >
                </view>
                <view
                    v-if="list.length >= 2"
                    style="
                        width: 382rpx;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: space-between;
                    "
                >
                    <view style="display: flex; flex-direction: column; align-items: center">
                        <image
                            :src="list[0].picAbsolute"
                            style="margin-top: 50rpx; height: 176rpx; background-color: #eaeaea; width: 160rpx"
                        ></image>
                        <label
                            class="pop_text"
                            style="
                                margin-top: 20rpx;
                                color: #234941;
                                font-size: 28rpx;
                                font-weight: 400;
                                padding: 0 20rpx;
                            "
                            >{{ list[0].name }}</label
                        >
                    </view>
                    <view style="display: flex; flex-direction: column; align-items: center">
                        <image
                            :src="list[1].picAbsolute"
                            style="margin-top: 50rpx; height: 176rpx; background-color: #eaeaea; width: 160rpx"
                        ></image>
                        <label
                            class="pop_text"
                            style="
                                margin-top: 20rpx;
                                color: #234941;
                                font-size: 28rpx;
                                font-weight: 400;
                                padding: 0 20rpx;
                            "
                            >{{ list[1].name }}</label
                        >
                    </view>
                </view>
                <view @click="closeEvent()" class="qd_btn">确定</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    name: 'xunzhang-pop-view',
    data() {
        return {};
    },
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        list: {
            type: Array,
            default: () => [],
        },
    },
    methods: {
        closeEvent() {
            this.$emit('close');
        },
    },
};
</script>

<style scoped>
.pop_view {
    width: 530rpx;
    height: 618rpx;
    background-image: url('https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/xunzhang_back.png');
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pop_text {
    width: 160rpx;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qd_btn {
    width: 240rpx;
    height: 88rpx;
    background: linear-gradient(180deg, #46c09e 0%, #156d4f 100%);
    box-shadow: 0rpx 24rpx 48rpx 0rpx rgba(55, 168, 148, 0.2);
    border-radius: 24rpx;
    margin-top: 40rpx;
    line-height: 88rpx;
    color: #fff;
    font-size: 30rpx;
    text-align: center;
}
</style>
